<script>
import { main } from '@/util/mixins'
import * as service from 'services/x-start/mgr/user'
import { getList as getRoleList } from 'services/x-start/mgr/role'
export default {
  mixins: [main],
  data() {
    return {
      service,
      roleList: [],
      previewImgUrl: null,
    }
  },
  created() {
    getRoleList({ superTrue: true }).then(res => {
      this.roleList = res.data
    })
  },
  methods: {
    sortChange(val) {
      this.getList({ val })
    },
    change(url, item) {
      item.img_src = url
    },
  },
}
</script>

<template lang="pug">
Template(@sizeChange="handleSizeChange" @currentChange="handleCurrentChange" :total="total" ref="child")
  span(slot="title") 用户管理
  .btns(slot="rightBtn")
    el-button(size="mini" type="primary" plain @click="detail()") 新建用户
  .list(slot="list")
    el-table(
      ref="table"
      stripe
      :data="tableData"
      tooltip-effect="dark"
      fit
      @sort-change="sortChange"
      @selection-change="handleSelectionChange"
    )
      el-table-column(prop="id" label="用户id")
      el-table-column(prop="username" label="账号" )
      el-table-column(prop="nickname" label="昵称" )
      el-table-column(label="创建时间")
        template(slot-scope="{row}")
          span {{row.createTime|formatTime}}
      el-table-column(label="账号权限")
        template(slot-scope="{row}")
          span(v-for="item in row.roles") {{item.name}}
      el-table-column(label="操作" fixed="right")
        template(slot-scope="{row}")
          Icon(title="修改" type="icon-detail" @click="detail(row.id,row)")
          Icon(title="删除" type="icon-delete" @click="del(row.id)")
  .detail(slot="detail")
    .group
      .label.must 账号：
      .right
        input.form-control(size="small" v-va="{ type:'required' }" vali="" :disabled="detailInfo.id" v-model="detailInfo.username")
    .group
      .label.must 角色：
      .right
        el-select(v-model="detailInfo.roleId" :disabled="detailInfo.id===1&&detailInfo.roleId===1" placeholder="请选择角色")
          el-option(v-for="item in roleList"
            :key="item.name"
            :label="item.name"
            :value="item.id"
            :disabled="item.id===1"
          )
    .group
      .label.must 昵称：
      .right
        input.form-control(size="small" v-va="{ type:'required' }" vali="" v-model="detailInfo.nickname")
    .group
      .label.must 头像：
      .right
        FileUpload(:data="detailInfo" name="profile")
    .group 
      .label 密码：
      .right
        el-input.width( v-model="detailInfo.password")
</template>

<style lang="stylus" scoped>
.data
  display inline-block
  line-height 40px
  li
    display inline-block
    cursor pointer
    margin-right 20px
    &.active
      color #FF6D60
</style>